import { TableColumns } from 'naive-ui/es/data-table/src/interface'
import { h, ref } from 'vue'
import usePagination from './usePagination'
import { ISymbol } from '@/types/symbol'
import { apiList } from '@/api/apiList'
import { isMsgOK, isOK } from '@/utils/resUtils'
import { ElMessage, ElMessageBox, UploadUserFile } from 'element-plus'
import { NButton, NImage, NSpace } from 'naive-ui'
import useResourceHelper from './ui/useResourceHelper'

function useSymbol() {
    async function getSymbolList() {
        try {
            const res = await apiList.symbolApi.querySymbols()

            if (isOK(res)) {
                tableData.value = res.result

                return res.result || []
            }
            return []
        } catch (error) {
            console.warn('请求异常')
        }
    }

    const showAddDlg = ref(false)

    const addSymbolModel = ref({
        name: '',
        files: [] as UploadUserFile[],
    })

    function handleAddSymbol() {
        showAddDlg.value = true
    }

    async function handleAddSymbolConfirm() {
        const { name, files } = addSymbolModel.value

        try {
            const res = await apiList.symbolApi.addSymbol({
                name,
                file: files[0].raw!,
            })

            if (isMsgOK(res)) {
                ElMessage.success(res.message)
                getSymbolListPage()

                showAddDlg.value = false
            } else {
                ElMessage.error(res.message)
            }
        } catch (error) {
            console.warn('请求异常')
        } finally {
            addSymbolModel.value = {
                name: '',
                files: [],
            }
        }
    }

    async function handleDeleteSymbol(data: ISymbol) {
        await ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示')
        try {
            const res = await apiList.symbolApi.delSymbol({
                id: data.id,
            })

            if (isMsgOK(res)) {
                ElMessage.success(res.message)

                await getSymbolListPage()
            } else {
                ElMessage.warning(res.message)
            }
        } catch (error) {
            console.warn('请求异常')
        }
    }

    const { getNewPagination, setPagination } = usePagination()

    const pagination = getNewPagination()

    async function getSymbolListPage() {
        const { size, current } = pagination.value

        try {
            const res = await apiList.symbolApi.queryPageSymbols({
                page_index: current,
                page_size: size,
            })
            if (isOK(res)) {
                tableData.value = res.result.records || []

                setPagination(pagination, res.result)

                return res.result.records
            }

            return []
        } catch (error) {
            console.warn('请求异常', error)
        }
    }

    const { getStaticUrl } = useResourceHelper()

    const columns: TableColumns<ISymbol> = [
        // {
        //     key: 'id',
        //     title: 'ID',
        // },
        {
            key: 'created_time',
            title: '创建时间',
        },
        {
            key: 'name',
            title: '名称',
        },
        {
            key: 'relpath',
            title: '图片',
            render(row) {
                return h(NImage, {
                    src: getStaticUrl(row.relpath),
                    style: {
                        backgroundColor: '#fff',
                    },
                    class: 'preview-image',
                    previewedImgProps: {
                        style: {
                            backgroundColor: '#fff',
                        },
                    },
                    width: '40',
                })
            },
        },
        {
            key: 'operation',
            title: '操作',
            render(row) {
                return h(NSpace, null, {
                    default: () =>
                        h(
                            NButton,
                            {
                                type: 'error',
                                size: 'small',
                                onClick: () => handleDeleteSymbol(row),
                            },
                            '删除',
                        ),
                })
            },
        },
    ]

    const tableData = ref<ISymbol[]>([])

    return {
        // add symbol
        showAddDlg,
        handleAddSymbol,
        addSymbolModel,
        handleAddSymbolConfirm,

        // delete symbol
        handleDeleteSymbol,

        // symbol list
        getSymbolList,
        pagination,
        getSymbolListPage,
        columns,
        tableData,
    }
}
export default useSymbol
